<template>
  <div class="Topbar">
    <div class="inner">
      <slot name="logo"></slot>
      <slot name="search"></slot>
      <section class="goback" v-if="gobackEnabled" @click="$router.go(-1)">
        <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
          <polyline points="12,18 4,9 12,0" style="fill:none;stroke:rgb(255,255,255);stroke-width:2"></polyline>
        </svg>
      </section>
      <router-link class="login" v-if="profileEnabled" :to="userInfo? '/profile':'/login'">
        <svg class="user-avatar" v-if="userInfo">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#user"></use>
        </svg>
        <span class="login-span" v-else>登录|注册</span>
      </router-link>
      <section class="title ellipsis" v-if="title">
        <span class="title-span">{{title}}</span>
      </section>
      <slot name="edit"></slot>
      <slot name="msite-title"></slot>
      <slot name="changecity"></slot>
      <slot name="changeLogin"></slot>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
export default {
  name: 'Topbar',
  props: ['title', 'gobackEnabled', 'profileEnabled'],
  beforeMount() {
    if (this.profileEnabled) {
      this.initUserInfo();
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    ...mapActions(['initUserInfo'])
  }
};
</script>
<style lang="scss">
@import '../styles/mixin';
.Topbar {
  padding-top: 1.95rem;
}
.Topbar .inner {
  background-color: $blue;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  @include wh(100%, 1.95rem);

  .goback {
    left: 0.4rem;
    @include wh(0.6rem, 1rem);
    line-height: 2.2rem;
    margin-left: 0.4rem;
  }

  .login {
    right: 0.55rem;
    @include sc(0.65rem, #fff);
    @include ct;

    .login-span {
      color: #fff;
    }

    .user-avatar {
      fill: #fff;
      @include wh(0.8rem, 0.8rem);
    }
  }

  .title {
    @include center;
    width: 50%;
    color: #fff;
    text-align: center;

    .title-span {
      @include sc(0.8rem, #fff);
      text-align: center;
      font-weight: bold;
    }
  }
}
</style>


